<template>
	<div style="position: relative">
		<div class="filter-line b-b-d  flx-row-s-c">
			<span class="item-name">请求状态</span>
			<span v-for="(item, index) in requestStatus" :key="item.id" class="select-item"
				:class="[index == requestStatusSelect ? 'active' : 'normal']"
				@click="checkedEvent(index)">
				{{ item }}
			</span>
      <span class="item-name">域名</span>
      <Input v-model.trim="search" placeholder="" maxlength="30" style="width: 150px" />
      <div
          class="user-strong-button line-button-size"
          style="margin: 0 10px 0 30px"
          @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
		</div>

<!--		<div class="filter-lineflx-row-s-c">
			<div class="user-strong-button search-icon-btn" style="margin: 0 10px 0 30px" @click="pageChange(1)"></div>
		</div>-->
		<div class="listTable-area pub-m-t-15">
			<div style="position: relative">
				<Spin :withIcon="true" v-if="loading"></Spin>
				<div class="filter-line search-result-line flx-row-bw-c">
					<span class="c-black f-14">收到的请求列表<span class="c-o">（{{ pageData.total }}）</span></span>
				</div>

				<!-- 数据 -->
				<table class="table-area">
					<thead>
						<tr>
              <th>
                <div class="line-style" style="justify-content: center;min-width: 48px">序号</div>
              </th>
							<th>
								<div class="line-style">域名</div>
							</th>
							<th>
								<div class="line-style">对方ID</div>
							</th>
							<th>
								<div class="line-style">数量</div>
							</th>
							<th>
								<div class="line-style">成功/失败/总数</div>
							</th>
							<th>
								<div class="line-style">索要金额</div>
							</th>
							<th>
								<div class="line-style">时间</div>
							</th>
							<th>
								<div class="line-style">状态</div>
							</th>
							<th>
								<div class="line-style">操作</div>
							</th>
							<th>
								<div class="line-style">备注</div>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr class="lc-f" v-for="(item, index) in pageData.list" :key="item.id">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f" title="">{{
                      index + 1 + (pageData.page - 1) * pageData.limit
                    }}</span>
                </div>
              </td>
							<td style="max-width: 180px; width: 180px; box-sizing: border-box">
								<div class="line-style">
									<span class="c-o f-ell-sin">{{ item.domainName }}</span>
								</div>
							</td>
							<td style="max-width: 120px; width: 120px; box-sizing: border-box">
								<div class="line-style">
									<span class="normal-f">{{ item.senderAccount }}</span>
								</div>
							</td>
							<td style="
                  max-width: 60px;
                  width: 60px;
                  box-sizing: border-box;
                  cursor: pointer;
                ">
								<div class="line-style" @click="showDomain(item.resultList)">
									<span class="normal-f f-ell-sin">{{ item.count }}</span>
								</div>
							</td>
							<td style="
                  max-width: 120px;
                  width: 120px;
                  box-sizing: border-box;
                  cursor: pointer;
                ">
								<div class="line-style" @click="showDomain(item.resultList)">
									<span class="normal-f">{{ item.result }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="c-r">{{ item.amount }}</span>
								</div>
							</td>
							<td style="max-width: 155px; width: 155px; box-sizing: border-box">
								<div class="line-style">
									<span class="normal-f">{{ item.createdTime }}</span>
								</div>
							</td>
							<td>
								<div class="line-style">
									<span class="normal-f">{{ status(item) }}</span>
								</div>
							</td>
							<td style="max-width: 150px; width: 150px; box-sizing: border-box">
								<div class="line-style normal-f" v-if="item.status === 0">
									<div class="form-font-button" @click="operateEvent(item, 0)">
										接收
									</div>
									<div class="form-font-button" style="background-color: #3a9b54"
										@click="operateEvent(item, 1)">
										拒绝
									</div>
								</div>
								<div class="line-style normal-f" v-else>---</div>
							</td>
							<td style="max-width: 180px; width: 180px; box-sizing: border-box">
								<div class="line-style">
									<span class="f-g f-ell-sin">{{ item.remark }}</span>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- 暂无数据组件 -->
				<Empty-State v-if="pageData.total != null && pageData.total == 0" content="未搜索到任何内容！"></Empty-State>
				<!-- 分页组件 -->
				<div v-if="pageData.total > 0" class="form-page-bottom-area flx-row-c-c"
					style="padding: 20px 25px 30px">
					<Page :total="pageData.total" :current="pageData.page" :page-size="pageData.limit"
						:page-size-opts="pageData.pageSizeOpts" @on-change="pageChange"
						@on-page-size-change="pageSizeChange" show-elevator show-sizer show-total />
				</div>
			</div>
		</div>



		<!-- <Lodding :loading="loading" /> -->
		<!-- 弹出层展示所有域名信息 -->
		<commonModal :show.sync="showBidding" :isMask="false" :hideCancel="true" @confirmEvent="showDomainConfirmEvent"
			@cancelEvent="cancelEvent">
			<template #content>
				<div>
					<div class="list-header">
						<div class="status">状态</div>
						<div class="name">域名</div>
					</div>
					<div class="domain-list">
						<div class="row" v-for="item in resultList" :key="item.domainName">
							<div class="status">{{ pushStatus(item) }}</div>
							<div class="name">{{ item.domainName }}</div>
						</div>
					</div>
				</div>
			</template>
		</commonModal>
		<!-- 确认拒绝接收操作 -->
		<commonModal :content="'您确定拒绝接收吗？'" :show.sync="showBidding2" :loading.sync="showLoading"
			@confirmEvent="pushConfirmEvent(1)" @cancelEvent="cancelEvent">
		</commonModal>
		<!-- 确认接收操作 -->
		<commonModal :show.sync="showBidding3" :loading.sync="showLoading" :width="1000" title="接收"
			@confirmEvent="pushConfirmEvent(0)" @cancelEvent="cancelEvent">
			<template #content>
				<div>
					<!-- 数据 -->
					<table class="table-area">
						<thead>
							<tr>
								<th>
									<div class="line-style">域名</div>
								</th>
								<th>
									<div class="line-style">对方ID</div>
								</th>
								<th>
									<div class="line-style">模板</div>
								</th>
								<th>
									<div class="line-style">索要金额</div>
								</th>
								<th>
									<div class="line-style">时间</div>
								</th>
								<th>
									<div class="line-style">备注</div>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr class="lc-f">
								<td style="max-width: 180px; width: 180px; box-sizing: border-box">
									<div class="line-style">
										<span class="c-o f-ell-sin">{{ info.domainName }}</span>
									</div>
								</td>
								<td style="max-width: 120px; width: 120px; box-sizing: border-box">
									<div class="line-style">
										<span class="c-o f-ell-sin">{{ info.senderAccount }}</span>
									</div>
								</td>
								<td style="max-width: 170px; width: 170px; box-sizing: border-box" @click="templateSelectModalShow = true">
									<div class="line-style">
										<span class="normal-f">
											<span class="c-d2 f-w-600 f-14 cursor-pointer" v-if="selectTemplateName"
												style="margin-right: 15px">{{ selectTemplateName }}</span>
											<div class="
                          b-user-strong-button
                          small-code-button
                          cursor-pointer
                        " v-else>
												点击选择
											</div>
										</span>
									</div>
								</td>
								<td>
									<div class="line-style">
										<span class="normal-f f-ell-sin">{{ info.amount }}</span>
									</div>
								</td>
								<td style="max-width: 145px; width: 145px; box-sizing: border-box">
									<div class="line-style">
										<span class="normal-f">{{ info.createdTime }}</span>
									</div>
								</td>
								<td style="max-width: 180px; width: 180px; box-sizing: border-box">
									<div class="line-style">
										<span class="normal-f f-ell-sin">{{ info.remark }}</span>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<!-- 模板管理 -->
					<div class="template-manage">
						<!-- <Button>模板管理</Button> -->
						<p class="tips c-black">
							如果您选择使用临时模板，请阅读
							<span class="o-form-font-button"
								@click.prevent="templateRuleModelShow = true">《{{ templateRuleTitle }}》</span>
						</p>
					</div>
					<!-- 消息 -->
					<div class="message" v-if="info.isLock === 1">
						温馨提示：此域名已设置60天内禁止转移，请知悉！
					</div>
					<!-- 短信验证部分 -->
					<div class="form-warp" style="margin-top: 20px">
						<div class="flx-row-s-c div-line">
							<div class="flx-row-s-c long-name-nece">
								<div class="long-name">验证码</div>
								<Input v-model.trim="coverIdentifyCode" maxlength="4" style="width: 100px" />
							</div>

							<div class="code-img-area" style="margin-left: 10px">
								<Identify :identifyCode="identifyCode" :contentWidth="80" :contentHeight="30"
									:fontSizeMax="25" />
							</div>
							<span class="o-form-font-button" style="margin-left: 10px" @click="refreshCode">刷新</span>
						</div>
						<div class="flx-row-s-c div-line">
							<div class="long-name">手机号码</div>
							<span class="c-d2 f-14">{{ mobile }}</span>
							<div class="user-normal-button form-button-size" style="margin-left: 10px"
								@click="getCodeEvent">
								{{ senCodeText }}
							</div>
							<span class="c-black f-14" style="margin-left: 10px">若手机号已停用无法收到短信，请联系在线客服!</span>
						</div>
						<div class="flx-row-s-c div-line long-name-nece">
							<div class="long-name">短信验证码</div>
							<Input v-model.trim="smsCode" style="width: 100px" />
						</div>
						<Checkbox class="radio-mg-r-20 submit-button-style-first" v-model="single">
							<span class="c-black">我已阅读并同意</span>
							<span class="o-form-font-button"
								@click.prevent="ruleModelShow = true">《{{ ruleTitle }}》</span>
						</Checkbox>
					</div>
				</div>
			</template>
		</commonModal>

		<!-- 确认接收PUSH -->
		<commonModal :show.sync="showBidding4" :loading.sync="showLoading" :width="850" title="接收PUSH"
			:hideConfirm="true" :hideCancel="true">
			<template #content>
				<div class="receive-box">
					<div class="tips-area" style="margin-bottom: 20px;" v-if="info.isLock === 1"> 温馨提示：对方设置了禁止转移，即在接收PUSH后60天内您将无法将域名转出190。
					</div>
					<div class="push-tip" style="margin-bottom: 20px;">
						<p>对方本次发起的PUSH包含<span class="c-r">{{info.amount}}条</span>域名，索要金额<span class="c-r"> ¥ {{info.amount != null ? info.amount : 0}} 元 </span>。</p>
						<p>留言备注：这是给你用的域名，记得及时接收！放在你自己的模板下！</p>
					</div>
					<!-- 数据 -->
          <div style="max-height: 300px; overflow-y: scroll">
            <table class="table-area">
              <thead>
              <tr>
                <th>
                  <div class="line-style">序号</div>
                </th>
                <th>
                  <div class="line-style">域名</div>
                </th>
                <th @click="templateSelectModalShow = true">
                  <div class="line-style" @click="templateSelectModalShow = true">
                    <!--										<Select v-model="template" filterable style="width: 200px" placeholder="选择模版"
                                          :label-in-value="true">
                                          <Option v-for="item in templateList" :value="item.id" :key="item.id">
                                            {{ item.name }}
                                          </Option>
                                        </Select>-->
                    <div class="line-style">
										<span class="normal-f">
											<span class="c-d2 f-w-600 f-14 cursor-pointer" v-if="selectTemplateName">{{ selectTemplateName }}</span>
											<div class="
                          b-user-strong-button
                          small-code-button
                          cursor-pointer
                        " v-else>
												点击选择
											</div>
										</span>
                    </div>
                  </div>
                </th>
                <th>
                  <div class="line-style">域名备注</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item, index) in  info.resultList" :key="index">
                <td style="width: 100px; box-sizing: border-box">
                  <div class="line-style">
                    <span class="normal-f">{{ index + 1 }}</span>
                  </div>
                </td>
                <td style="max-width: 180px; width: 180px; box-sizing: border-box">
                  <div class="line-style">
                    <span class="c-o f-ell-sin">{{ item.domainName }}</span>
                  </div>
                </td>
                <td style="max-width: 250px; width: 200px; box-sizing: border-box">
                  <div class="line-style">
										<span class="normal-f">
                      {{selectTemplateName && selectTemplateName.length > 0 ? selectTemplateName : '-'}}
                      <!--											<Select v-model="item.template" filterable style="width: 200px"
                                              placeholder="选择模版" :label-in-value="true">
                                              <Option v-for="item in templateList" :value="item.id" :key="item.id">
                                                {{ item.name }}
                                              </Option>
                                            </Select>-->
										</span>
                  </div>
                </td>
                <td style="max-width: 250px; width: 200px; box-sizing: border-box">
                  <div class="line-style">
                    <Input v-model.trim="item.domainRemark" placeholder="请输入备注" maxlength="20"
                           style="width: 200px" />
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

<!--					<div style="padding-top: 20px;">本次PUSH将在 2024-11-22 08:55:46 过期，此前对方也可随时取消本次域名PUSH。</div>-->
					<div class="form-warp" style="margin-top: 20px">
						<Checkbox class="submit-button-style-first" v-model="single">
							<span class="c-black">我已阅读并同意</span>
							<span class="o-form-font-button"
								@click.prevent="ruleModelShow = true">《{{ ruleTitle }}》</span>
						</Checkbox>
						<div class="form-foot">
							<div class="user-strong-button  line-button-size mg-r-25" @click="pushSubmit">
								支付并接收
							</div>
							<div class="user-normal-button  line-button-size" @click="showBidding4 = false">
								返 回
							</div>
						</div>
					</div>
				</div>
			</template>
		</commonModal>

		<template-select-modal :show.sync="templateSelectModalShow" :tSelect="templateSelect"
			@check-submit="selectTemplateSubmit"></template-select-modal>
		<rule-modal :show.sync="ruleModelShow" :content="ruleContent" :title="ruleTitle"></rule-modal>
		<rule-modal :show.sync="templateRuleModelShow" :content="templateRuleContent"
			:title="templateRuleTitle"></rule-modal>
    <submitAutoRenewModal
        ref="submitAutoRenewModal"
        title="操作验证"
        :show.sync="submitAutoRenewModalShow"
        @confirm="submitAutoRenewConfirm"
    />
	</div>
</template>

<script>
	import {
		getPushPageList,
		postPushEdit,
    postPushEditV2
	} from "@/api/bidding";
	import token from "@/utils/token";
	//import Lodding from "_c/spin/loading";
	import pushRules from "@/static/pushRules";
	import templateRules from "@/static/pushRules";
	import commonModal from "_c/modal/commonModal/index";
	import templateSelectModal from "_c/modal/templateSelectModal/templateSelectModal.vue";

	import {
		getStatusText,
		getPushStatusText,
		makeCode
	} from "@/utils/format";
	import {
		sendCode
	} from "@/api/user";
	import Identify from "_c/identify";
	// import axios from "axios";
	// const bottomInfoUrl =
	//   process.env.NODE_ENV === "development"
	//     ? config2.bottomInfoUrl.dev
	//     : config2.bottomInfoUrl.pro;

	export default {
		name: "VipDnPushReceive",
		components: {
			// Lodding,
			commonModal,
			Identify,
			templateSelectModal,
      submitAutoRenewModal: () => import("_c/modal/renewResultModal/submitAutoRenewModal"),
			ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
		},
		data() {
			return {
				ruleModelShow: false,
				ruleContent: "",
				ruleTitle: "",
				templateRuleModelShow: false,
				templateRuleContent: "",
				templateRuleTitle: "",
				requestStatus: ["全部", "未接收", "已接收", "已拒绝", "已取消"],
				requestStatusSelect: 0,
				search: "",
				pageData: {
					list: [],
					pageSizeOpts: [10, 15, 20],
					total: 0,
					page: 1,
					limit: 10,
				},
				// loading加载中
				loading: false,
				// 打开弹出层
				showBidding: false,
				// 弹窗展示数据
				resultList: [],
				// 取消接收弹出层
				showBidding2: false,
				// 取消转入弹出层loading
				showLoading: false,
				// 确认接收弹出层
				showBidding3: false,
				// 确认接收域名对象
				showBidding4: false,
				// 确认接收PUSH
				info: {
					/*id: 0,
					amount: 75000.0,
					remark: "域名交易push记录域名交易push",
					createdTime: "2015-12-20 15:30",
					domainName: "190.com",
					recipientAccount: "13265632992",*/
				},
				// 模板ID
				// templateId: 0,
				// 模板列表
				templateList: [{
						id: 1,
						name: "我的模板"
					},
					{
						id: 2,
						name: "我的模板2"
					},
				],
				// 图形验证码
				coverIdentifyCode: "",
				// 短信验证码
				smsCode: "",
				// 图形验证码
				identifyCode: "",
				isSendCode: false,
				senCodeText: "获取短信验证码",
				// 协议
				single: false,
				templateSelect: null,
				selectTemplateName: "",
				templateSelectModalShow: false,
				tableData: [{
					domainName: 'mzlhskj.cn',
					template: '',
					remark: ''
				}, {
					domainName: 'lrdspt.cn',
					template: '',
					remark: ''
				}, {
					domainName: 'bjfyhtshop.cn',
					template: '',
					remark: ''
				}, {
					domainName: '0731s.cn',
					template: '',
					remark: ''
				}, {
					domainName: 'zmxuan2.cn',
					template: '',
					remark: ''
				}],
        submitAutoRenewModalShow: false,
        submitData: {
          domainPushId: null,
          status: 1,
          templateId: null,
          code: null,
          domainPushRelationList: []
        }
			};
		},
		computed: {
			status() {
				return (val) => {
					return getStatusText(val.status || 0);
				};
			},
			pushStatus() {
				return (val) => {
					return getPushStatusText(val.relationStatus || 0);
				};
			},
			mobile() {
				return this.$store.state.user.mobile;
			},
		},
		created() {
			// this.getRule();
			this.ruleTitle = pushRules.title;
			this.ruleContent = pushRules.content;
			this.templateRuleTitle = templateRules.title;
			this.templateRuleContent = templateRules.content;
		},
		mounted() {
			const {
				tab
			} = this.$route.query;
			if (tab) {
				this.requestStatusSelect = parseInt(tab);
			}
			// 判断是否登录
			if (token.get()) {
				this.requestPushPageList();
			}
		},
		methods: {
      // 重置
      reset() {
        this.pageData.page = 1;
        this.pageData.limit = 10;
        this.requestStatusSelect = 0;
        this.search = '';
        this.requestPushPageList();
      },
      pushSubmit() {
        if (!this.templateSelect) {
          this.$Message.warning("请选择模板!");
          return false;
        }

        if (!this.single) {
          this.$Message.warning("请输入阅读协议后并同意!");
          return false;
        }
        let domainPushRelationList = this.info.resultList.map(item => {
          return {
            pushRelationId: item.pushRelationId,
            domainRemark: item.domainRemark,
          }
        })
        this.submitData = {
          domainPushId: this.info.id,
          status: 1,
          templateId: this.templateSelect,
          domainPushRelationList: domainPushRelationList,
          code: ''
        }
        console.log(this.submitData)
        this.submitAutoRenewModalShow = true
      },
      async submitAutoRenewConfirm(value) {
        if (!value) {
          this.$Message.warning("请输入验证码!");
          return false;
        }
        this.submitAutoRenewModalShow = false
        this.submitData.code = value
        this.showLoading = true;
        const {
          result,
          msg
        } = await postPushEditV2(this.submitData);
        this.showLoading = false;
        if (result) {
          this.showBidding4 = false;
          this.$Message.success("操作成功!");
          this.smsCode = "";
          this.coverIdentifyCode = "";
          this.templateSelect = null;
          this.selectTemplateName = "";
          this.requestPushPageList();
        } else {
          this.$Message.warning(msg);
        }
      },
			// 获取协议
			// getRule() {
			//   axios(`${bottomInfoUrl}/pushRules.json`).then((res) => {
			//     if (res != null && res.data != null) {
			//       this.ruleTitle = res.data.title;
			//       this.ruleContent = res.data.content;
			//     }
			//   });
			//   axios(`${bottomInfoUrl}/templateRules.json`).then((res) => {
			//     if (res != null && res.data != null) {
			//       this.templateRuleTitle = res.data.title;
			//       this.templateRuleContent = res.data.content;
			//     }
			//   });
			// },
			// 选择模板
			selectTemplateSubmit(id, name) {
				this.templateSelect = id;
				this.selectTemplateName = name;
			},
			async requestPushPageList() {
				this.loading = true;
				let params = {};
				params.page = this.pageData.page;
				params.limit = this.pageData.limit;
				params.domainName = this.search;
				params.type = 0;
				if (this.requestStatusSelect >= 1) {
					params.status = this.requestStatusSelect - 1;
				}
				const {
					code,
					data
				} = await getPushPageList(params);
				this.loading = false;
				if (code === 200 && data) {
					this.pageData.list = data.list;
					this.pageData.total = data.total;
				}
			},
			// 选择状态
			checkedEvent(val) {
				this.pageData.page = 1;
				this.pageData.limit = 10;
				this.requestStatusSelect = val;
				this.requestPushPageList();
			},
			// 搜索域名
			searchEvent() {
				this.pageData.page = 1;
				this.pageData.limit = 10;
				this.requestPushPageList();
			},
			// 切换页码
			pageChange(page) {
				this.pageData.page = page;
				this.requestPushPageList();
			},
			// 切换pageSize
			pageSizeChange(pageSize) {
				this.pageData.limit = pageSize;
				this.pageChange(1);
			},
			// 显示所有域名
			showDomainConfirmEvent() {
				this.showBidding = false;
			},
			// 关闭弹出层
			cancelEvent() {
				this.showBidding && (this.showBidding = false);
				if (this.showBidding2) {
					this.showBidding2 = false;
					this.editId = "";
				}
				if (this.showBidding3) {
					this.showBidding3 = false;
					this.info = "";
				}
			},
			// 展示更多域名
			showDomain(val) {
				this.resultList = val;
				this.showBidding = true;
			},
			// 操作事件
			async operateEvent(data, type) {
				if (type === 0) {
					// const { code, data: list } = await getTemplateSelectList({ type: 3 });
					// if (code === 200) {
					//   if (list.length === 0) {
					//     this.$Message.warning("暂未设置模板,前往模板管理设置模板!");
					//   } else {
					//     this.templateList = list;
					//   }
					// }
					// 同意
					// this.identifyCode = makeCode();
					this.info = data;
					this.showBidding4 = true;
				} else if (type === 1) {
					this.editId = data.id;
					// 拒绝
					this.showBidding2 = true;
				}
			},
			// 拒绝接收事件
			async pushCancel() {
				const {
					code
				} = await postPushEdit({
					domainPushId: this.editId,
					status: 2,
				});
				this.showLoading = false;
				this.showBidding2 = false;
				if (code === 200) {
					this.$Message.success("操作成功!");
					this.requestPushPageList();
				} else {
					this.$Message.warning("操作失败，稍后重试!");
				}
			},
			// 接收事件
			async pushConfirm() {
				this.showLoading = false;
				if (!this.templateSelect) {
					this.$Message.warning("请选择模板!");
					return false;
				}
				if (!this.coverIdentifyCode) {
					this.$Message.warning("请输入图形验证码");
					return false;
				} else if (
					this.identifyCode.toLowerCase() !== this.coverIdentifyCode.toLowerCase()
				) {
					this.$Message.warning("图形验证码错误!");
					return false;
				}
				if (!this.smsCode) {
					this.$Message.warning("请输入验证码!");
					return false;
				}
				if (!this.single) {
					this.$Message.warning("请输入阅读协议后并同意!");
					return false;
				}
				this.showLoading = true;
				const {
					code,
					result,
					data
				} = await postPushEdit({
					domainPushId: this.info.id,
					status: 1,
					templateId: this.templateSelect,
					code: this.smsCode,
				});
				this.showLoading = false;
				this.showBidding3 = false;
				if (code === 200) {
					if (result) {
						this.$Message.success("操作成功!");
						this.smsCode = "";
						this.coverIdentifyCode = "";
						this.templateSelect = null;
						this.selectTemplateName = "";
						this.requestPushPageList();
					}
				} else {
					!result && this.$Message.warning(data);
				}
			},
			// 操作模态框确认事件
			async pushConfirmEvent(type) {
				if (type === 1) {
					this.pushCancel();
				} else if (type === 0) {
					this.pushConfirm();
				}
			},
			// 刷新验证码
			refreshCode() {
				this.identifyCode = makeCode();
			},
			// 获取短信验证吗
			async getCodeEvent() {
				if (!this.coverIdentifyCode) {
					this.$Message.warning("请输入图形验证码!");
					return false;
				} else if (
					this.identifyCode.toLowerCase() !== this.coverIdentifyCode.toLowerCase()
				) {
					this.$Message.warning("图形验证码错误!");
					return false;
				}
				if (!this.isSendCode) {
					let count = 60;
					this.isSendCode = true;
					this.loading = true;
					const {
						code
					} = await sendCode();
					this.loading = false;
					if (code === 200) {
						this.smsInterval = setInterval(() => {
							count -= 1;
							this.senCodeText = `${count}s后重新发送`;
							if (count === 0) {
								this.isSendCode = false;
								this.senCodeText = "重新发送";
								this.smsInterval && clearInterval(this.smsInterval);
							}
						}, 1000);
					} else {
						this.isSendCode = false;
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.listTable-area {
		padding: 30px;
		position: relative;
		left: -30px;
		width: calc(100% + 60px);
		border-top: 20px solid #f3f6fb;
	}

	.long-name {
		min-width: 80px;
	}

	.mg-r-25 {
		margin-right: 25px;
	}

	.template-icon {
		@include size(16px);
		margin-right: 10px;
		flex-shrink: 0;
	}

	.c-icon {
		@include bg-setting("t-i-1");
	}

	.p-icon {
		@include bg-setting("t-i-2");
	}

	.list-header,
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.status {
			width: 120px;
			text-align: center;
		}

		.name {
			flex: 1;
			text-align: center;
		}
	}

	.list-header {
		background-color: #eceff3;
		padding: 10px 0;

		.status,
		.name {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.form-font-button {
		display: inline-block;
		min-width: 60px;
		@include size(60px, 25px);
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		background-color: $mainColor;
	}

	.domain-list {
		height: 200px;
		margin-top: 10px;
		overflow-y: auto;
	}

	.template-manage {
		margin-top: 20px;
		display: flex;
		align-items: center;

		.tips {
			margin-left: 20px;
			font-size: 14px;

			.agreement {
				color: #2d8cf0;
			}
		}
	}

	.message {
		margin-top: 20px;
		padding: 10px 20px;
		color: #fff;
		background-color: $mainColor;
		border-radius: 5px;
	}

	.form-warp {
		.div-line {
			margin-bottom: 10px;
		}
	}

	.receive-box {
		table {
			/deep/ .ivu-select {
				position: relative;
				z-index: 1;


				.ivu-select-selection {
					border: 0;
				}
			}

			/deep/ .ivu-select-visible {
				z-index: 2;
			}


			/deep/ .ivu-input {
				border: 0;
			}

			td,
			th {
				overflow: unset;
			}

			th {
				/deep/ .ivu-select-input {
					font-weight: 700;
					color: #000;
				}

				/deep/ .ivu-select-input::placeholder {
					color: #000;
				}
			}

			tbody {
				tr:hover {
					transform: unset;
				}
			}
		}

		.form-warp {
			text-align: center;

			.submit-button-style-first {
				margin: 0 0 15px;
			}

			.form-foot {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
